<template>
  <div
    class="card-model"
    :style="{
      width: width + 'px',
      height: height + 'px',
      backgroundImage: 'url(' + imgUrl + ')',
    }"
  >
    <div class="card-model-title" v-if="title">
      <img :src="titleIconUrl" alt="" />
      <div>{{ title }}</div>
    </div>
    <slot />
  </div>
</template>

<script setup name="CardModel">
const props = defineProps({
  width: {
    type: [Number, String],
    default: 460,
  },
  height: {
    type: [Number, String],
    default: 436,
  },
  imgUrl: {
    type: String,
  },
  titleIconUrl: {
    type: String,
  },
  title: {
    type: String,
    default: "",
  },
});
</script>
<style scoped lang="scss">
.card-model {
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 15px;
  background-repeat: no-repeat;
  overflow: hidden;

  &-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 17px;
    color: #404348;
  }
}
</style>
